<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="icon" href="./浮动及定位/images/∞.jpg">
</head>

<body>
    <div class="header">
        <div class="">
            <div class=""></div>
        </div>
    </div>
    <div class="maodian">
        <ul class="navA" id="daohang">
            <li><a href="./主页.html" target="_parent" class="navA">导航菜单制作</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href="./导航菜单制作/鼠键.html" target="_blank">
                                <p>鼠键</p>
                            </a></li>
                        <li><a href="./导航菜单制作/bilibili.html" target="_blank">
                                <p>bilibili效果</p>
                            </a></li>
                        <li><a href="./导航菜单制作/导航菜单设计与制作.html" target="_blank">
                                <p>导航菜单设计与制作</p>
                            </a></li>
                    </div>
                </ul>
            </li>
            <li><a href="./主页.html" target="_parent" class="navA">浮动及定位</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href="./浮动及定位/display.html" target="_blank">
                                <p>display</p>
                            </a></li>
                        <li><a href="./浮动及定位/浮动.html" target="_blank">
                                <p>浮动</p>
                            </a></li>
                        <li><a href="./浮动及定位/定位.html" target="_blank">
                                <p>定位</p>
                            </a></li>
                        <li><a href="./浮动及定位/促销图示.html" target="_blank">
                                <p>促销图示</p>
                            </a></li>
                    </div>
                </ul>
            </li>
            <li><a href="./主页.html" target="_parent" class="navA">图标字体与购物车</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href="./图标字体与购物车/购物车.html" target="_blank">
                                <p>购物车</p>
                            </a></li>
                    </div>
                </ul>
            </li>
            <li><a href="./主页.html" target="_parent" class="navA">css动画</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href="./css动画-动感立方体/2D.html" target="_blank">
                                <p>2D</p>
                            </a></li>
                        <li><a href="./css动画-动感立方体/3D.html" target="_blank">
                                <p>3D</p>
                            </a></li>
                        <li><a href="./css动画-动感立方体/立方体.html" target="_blank">
                                <p>立方体</p>
                            </a></li>
                    </div>
                </ul>
            </li>
            <li><a href="https://gitee.com/tongbu1431183740/gray_-wind-s-reservoir" target="_blank" class="navA">Gitee from Gray_Wind</a></li>
        </ul>
    </div>
    <style>
        body {
            background: url(./css动画-动感立方体/images/背景.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        ul {
            list-style-type: none;
            padding: 0;
            top: -35px;
            display: flex;

        }

        .maodian {
            margin-left: 150px;
        }

        li a.navA {
            text-decoration: none;
            display: block;
            color: #39C5BB;
            text-align: center;
            padding: 16px 16px 16px 16px;
            font-size: 30px;
            font-weight: 700;
            font-family: 幼圆;
        }

        ul.navA {
            display: flex;
            position: fixed;
            width: 100%;
            font-size: 35px;
        }


        .navA li:hover a.navA {
            background-color: #66CCFF;
            border-bottom: 5px solid #003f88;
            opacity: 1;
            visibility: visible;
            transition: all 0.7s ease;
        }

        div.navB {
            display: none;
            position: relative;
            left: 0;
            margin: 0 10px 20px 10px;
            border: 0 22px;
            text-align: center;
            background-color: pink;
            color: #39C5BB;
            font-size: 20px;
            overflow: hidden;
        }

        div.navB>li>a {
            color: #39C5BB;
            text-decoration: none;
            text-align: 20px;
        }

        li:hover .navB {
            display: block;
        }

        .navB>li>a:hover {
            background-color: #66CCFF;
        }
    </style>
</body>

</html>